import React from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, List, Toast } from 'antd-mobile';

const complaintReasons = [
  '网页包含欺诈信息(如:假红包)',
  '网页包含违法信息',
  '网页可能包含谣言信息',
  '网页包含诱导分享/关注性质的内容',
  '网页包含(虚假/抽奖性质/欺诈)拼团信息',
  '网页包含虚拟支付信息',
  '网页包含不适当的内容对我造成骚扰',
  '网页含有偿投票信息',
  '网页包含隐私泄露风险',
];

const ComplaintPage = () => {
  const navigate = useNavigate();

  const handleReasonClick = (reason) => {
    navigate('/complaint/detail', { state: { reason } });
  };

  return (
    <div style={{ backgroundColor: '#f7f8fa', height: '100vh', display: 'flex', flexDirection: 'column' }}>
      <NavBar onBack={() => navigate(-1)} style={{'--border-bottom': '1px solid #eee'}}>投诉内容</NavBar>
      
      <div style={{ flex: 1, overflowY: 'auto' }}>
        <div style={{ padding: '12px 16px', color: '#888', fontSize: '14px' }}>
          请选择投诉该网页的原因:
        </div>
        <List>
          {complaintReasons.map((reason, index) => (
            <List.Item key={index} arrow onClick={() => handleReasonClick(reason)}>
              {reason}
            </List.Item>
          ))}
        </List>
        <div style={{ textAlign: 'center', padding: '20px', color: '#1677ff', fontSize: '14px' }} onClick={() => Toast.show('暂无投诉须知')}>
          投诉须知
        </div>
      </div>
    </div>
  );
};

export default ComplaintPage;
